<template>
	<view class="main">
		<navbar :title="$t('financial.group')" background="#FF8E20" titleColor="#FFFFFF" backColor="#FFFFFF">
		</navbar>
		<view class="msg">
			<view class="money">
				{{$currency + userInfo.money}}
			</view>
			<view class="balance">
				{{$t("financial.balance")}}
			</view>
			<!-- <view class="detail">
				<view class="left">
					<view class="left-font">
						{{$currency + totalInfo.earnings}}
					</view>
					<view class="left-style">
						{{$t("financial.earnings")}}
					</view>
				</view>
				<view class="middle">
					
				</view>
				<view class="left">
					<view class="left-font">
						{{totalInfo.buyers}}
					</view>
					<view class="left-style">
						{{$t("financial.numberof")}}
					</view>
				</view>
			</view> -->
			<view class="rule" @click="navTo('/pages/home/rule', {type: 'financerule'})">
					{{$t("financial.rule")}}
			</view>
		</view>
		<swiper class="toast-swiper" :autoplay="true" :interval="5000" :vertical="true" :circular="true">
			<swiper-item v-for="(item,index) in broadcastList" :key="index">
				<view class="toast-swiper-item">
					<image class="toast-swiper-item-img" src="@/static/image/home/alert_icon.png"></image>
					<view style="width: 1rpx;height:36rpx;background: #231815;margin-left:20rpx;"></view>
					<view class="toast-swiper-item-main">
						<text>{{item}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<mescroll-body ref="mescrollRef" @up="upCallback" @init="mescrollInit" @down="downCallback"
		:down="downOption" :up="upOption" style="min-height: 0;">
		<view class="prefor">
			<view class="pre" @click="navTo('/pages/money/details',{id: item.id})" v-for="item in financeList" :key="item.id + item.name">
				<view class="pre-sale" v-if="item.status == '0'">
					{{$t("group.pre")}}
				</view>
				<view class="pre-sale bearing" v-if="item.status == '1'">
					{{$t("financial.bearing")}}
				</view>
				<view class="pre-sale end" v-if="item.status == '2'">
					{{$t("financial.end")}}
				</view>
				<view class="name">
					[NO:{{item.name}}]{{item.finance_name}}
				</view>
				<view class="pre-detail">
					<view class="types">
						<view class="detail-type">
							<image src="@/static/image/money/time1.png" mode="" style="width: 24rpx;height: 29rpx;"></image>
							<view class="detail-font">
								{{item.day}} days
							</view>
						</view>
						<view class="explain">
							{{$t("financial.due")}}
						</view>
					</view>
					<view class="types">
						<view class="detail-type">
							<image src="@/static/image/money/price.png" mode="" style="width: 29rpx;height: 26rpx;"></image>
							<view class="detail-font">
								{{$currency + item.price}}
							</view>
						</view>
						<view class="explain">
							{{$t("financial.price")}}
						</view>
					</view>
					<view class="types">
						<view class="detail-type">
							<image src="@/static/image/money/time2.png" mode="" style="width: 26rpx;height: 26rpx;"></image>
							<view class="detail-font" v-if="item.status == '0'">
								<!-- 1d:10:10:10 -->
								{{item.countTimestamp}}
							</view>
							<view class="detail-font" v-else>
								<!-- 1d:10:10:10 -->
								{{item.end_time | monthFormat}}
							</view>
						</view>
						<view class="explain" v-if="item.status == '0'">
							{{$t("financial.deadline")}}
						</view>
						<view class="explain" v-else>
							{{$t("success.earn")}}
						</view>
					</view>
				</view>
				<view class="box1">
					<view class="box-font">
						<view class="">
							{{$t("financial.yield")}}
						</view>
						<view class="">
							{{item.rate}}%
						</view>
					</view>
					<view class="box-font">
						<view class="">
							{{$t("financial.buy")}}
						</view>
						<view class="">
							{{item.buyers}}
						</view>
					</view>
					<view class="box-line">
						
					</view>
					<view class="u-flex u-row-between" v-if="item.ratelist&& item.ratelist.length">
						<view class="align-center-vertical" style="height: 120rpx;">
							<view>
								{{$t("financial.yie")}}
							</view>
							<view>
								{{$t("financial.buy")}}
							</view>
						</view>
						<view class="shape-grey">
							<view class="shape-green" :style="{width: item.ratePercent*445 - 22 + 'rpx'}">
								
							</view>
							<view class="align-center-vertical" style="width: 22rpx;z-index:1;" v-for="i in item.ratelist">
								<view>
									{{i.rate}}%
								</view>
								<view :class="Number(i.rate) <=Number(item.rate) ? 'cirle1' : 'cirle'">
									
								</view>
								<view>
									{{i.start}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		</mescroll-body>
		<tabbars page="/pages/money/myFinancial"></tabbars>
	</view>	
</template>

<script>
	import {
		total,
		list,
		broadcast
	} from '@/api/finance.js'
	import {
		mapGetters
	} from 'vuex' 
	import {
		parseTime,
		countDown
	} from '@/utils/utils'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
	export default{
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data() {
			return {
				downOption: {
					use: true,
					auto: true
				},
				upOption: {
					use: true,
					auto: true,
					page: {
						num: 0,
						size: 10
					}
				},
				financeList: [],
				list:[8,8,9,8],
				totalInfo: {},
				broadcastList: []
			};
		},
		onLoad(){
			this.load();
			this.loadBroast();
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		filters: {
			monthFormat(val) {
				if (!val) {
					return ''
				}
				const monthStr = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
				const time = new Date(val*1000);
				return monthStr[time.getMonth()] + ' ' + time.getDate();
			}
		},
		methods:{
			async loadBroast() {
				let result = await broadcast();
				this.broadcastList = result;
			},
			async upCallback(page) {
				let result = await list({
					page: page.num,
				})
				if (page.num == 1) this.financeList = []
				for (let i of result) {
					let index = 0;
					for (let j = 0;j < i.ratelist.length; j++) {
						if (Number(i.rate) >= Number(i.ratelist[j].rate)) {
							index = j;
						}
					}
					if (i.ratelist.length == 1) {
						i.ratePercent = 1;
					} else {
						i.ratePercent = index/(i.ratelist.length - 1);
					}
					if (i.status == '0') {
						let nowTime = new Date().getTime()/1000;
						i.countTimestamp = '00:00:00';
						let timeCount = setInterval(() => {
							nowTime++
							// i.countTimestamp = countDown(1671704640, nowTime)
							i.countTimestamp = countDown(i.presell_end_time, nowTime)
							this.$forceUpdate()
							if (i.countTimestamp == '00:00:00') {
								clearInterval(timeCount)
								this.load();
								this.mescroll.resetUpScroll()
							}
						}, 1000)
					}
				}
				this.financeList = this.financeList.concat(result)
				let curPageLength = result.length
				this.mescroll.endSuccess(curPageLength)
			},
			async load() {
				let result = await total();
				if (result) {
					this.totalInfo = result;
				}
			},
			async loadList() {
				let result = await list();
				if (result) {
					this.list = result;
				}
			},
			navTo(val, data) {
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						param += `${i}=${data[i]}&`
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F6F6F6FF;
	}
	.main {
		padding-bottom: 108rpx;
	}
	.msg{
		overflow: hidden;
		background: url(@/static/image/money/bg.png);
		background-size: 100%;
		background-position: center;
		color: #FFFFFF;
		position: relative;
		.money{
			margin-top: 52rpx;
			font-size: 60rpx;
			font-family: Alibaba PuHuiTi;
			font-weight: 400;
			line-height: 60rpx;
			text-align: center;
		}
		.balance{
			font-size: 28rpx;
			font-family: Rubik;
			font-weight: 400;
			text-align: center;
			line-height: 28rpx;
			margin-top: 25rpx;
			margin-bottom: 90rpx;
		}
		.detail{
			display: flex;
			align-items: center;
			color: #FFFFFF;
			.left{
				width: 374rpx;
				text-align: center;
				.left-font{
					font-size: 48rpx;
					font-family: Alibaba PuHuiTi;
					font-weight: 400;
					line-height: 48rpx;
				}
				.left-style{
					font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					line-height: 26rpx;
					margin-top: 30rpx;
					padding: 0 30rpx;
				}
			}
			.middle{
				width: 2rpx;
				height: 86rpx;
				background-color: #FFFFFF;
			}
		}
		.rule{
			position: absolute;
			right: 0;
			top: 0;
			font-size: 26rpx;
			font-family: Source Han Sans SC;
			font-weight: 400;
			color: #0F0F0E;
			width: 110rpx;
			height: 56rpx;
			background: rgba(0, 0, 0, 0.3);
			text-align: center;
			line-height: 56rpx;
			border-radius: 28rpx 0rpx 0rpx 28rpx;
		}
		
	}
	.toast-swiper {
		height: 70rpx;
		line-height: 70rpx;
		background: rgba(255, 216, 85, 0.2);
		border-radius: 10rpx;
		font-size:28rpx;
		.toast-swiper-item {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 80rpx;
	    
			.toast-swiper-item-img {
				width: 28rpx;
				height: 26rpx;
				image {
					margin-top: 10rpx;
					width: 28rpx;
					height: 26rpx;
				}
			}
	
			.toast-swiper-item-main {
				width: 80%;
				margin-left: 23rpx;
				margin-right: 0rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
	
				.name {
					color: #FF3950;
					// color: $uni-text-color-primary;
				}
			}
		}
	}
	
	.prefor{
	}
	.pre{
		position: relative;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 20rpx 20rpx;
		margin: 50rpx 30rpx 10rpx;
		overflow: hidden;
		position: relative;
		
		.pre-sale{
			position: absolute;
			height: 50rpx;
			background: linear-gradient(90deg, #F70736 0%, #FE5908 100%);
			border-radius: 10rpx;
			right: 10rpx;
			top: 10rpx;
			font-size: 26rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
			padding: 0 18rpx;
		}
		
		.bearing{
		}
		.end{
			width: 75rpx;
			height: 50rpx;
			background: #65676B;
			border-radius: 10rpx;
		}
		.name{
			font-size: 36rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			line-height: 36rpx;
			margin-left: 10rpx;
			padding-right: 140rpx;
		}
		.pre-detail{
			display: flex;
			margin-top: 61rpx;
			.types{
				width: 220rpx;
				.detail-type{
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 34rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #5C6390;
					.detail-font{
						margin-left: 9rpx;
						line-height: 34rpx;
					}
				}
				.explain{
					font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: rgba(168, 172, 192, 0.75);
					text-align: center;
					margin-top: 22rpx;
				}
			}
		}
	}
	
	.box1{
		width: 650rpx;
		height: 344rpx;
		background: #FFFFFF;
		border: 2rpx solid #E2E5EA;
		border-radius: 10rpx;
		padding: 0rpx 30rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		font-family: Rubik;
		font-weight: 400;
		color: #0F0F0E;
		margin-top: 38rpx;
		.box-font{
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
		}
		.box-line{
			width: 590rpx;
			height: 2rpx;
			background: #E2E5EA;
			margin: 30rpx 0;
			
		}
		.shape-grey{
			position: relative;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			width: 445rpx;
			background: linear-gradient(to left,transparent 0%,transparent 30%,#d0d2dd 30%,#d0d2dd 100%);background-size: 13rpx 4rpx;background-repeat: repeat-x;background-position-y: center;
		}
		.shape-green{
			z-index: 0;
			position: absolute;
			top: 58rpx;
			height: 4rpx;
			background: linear-gradient(to left,transparent 0%,transparent 30%,#5BC281 30%,#5BC281 100%);background-size: 13rpx 4rpx;background-repeat: repeat-x;
		}

		.cirle{
			width: 22rpx;
			height: 22rpx;
			background: #d0d2dd;
			border-radius: 50%;
		}
		.cirle1{
			width: 22rpx;
			height: 22rpx;
			background: #5BC281 ;
			border-radius: 50%;
		}
		
		.buy{
			font-size: 30rpx;
			font-family: Rubik;
			font-weight: 400;
			color: #0F0F0E;
			line-height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.buy-font{
				width: 68rpx;
			}
			.buy-number{
				margin-left: -12rpx;
				font-size: 26rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #A8ACC0;
				line-height: 26rpx;
			}
			.buy-number1{
				margin-left: -12rpx;
				font-size: 26rpx;
				font-family: Rubik;
				font-weight: 400;
				color:#5BC281;
				line-height: 26rpx;
			}
		}
	}
	.align-center-vertical{
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
	}
</style>
